{% extends 'manage/base/base.html' %}
{% load my_tags %}
{% block content %}

    <div class="row mt-4">
        <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light">
                            {% if is_limit == 1 %}
                                临期&过期商品信息({{ len }})
                            {% else %}
                                商品信息({{ len }})
                            
                <a class="btn btn-success" onclick="window.location.href='/goods?loc=1'">一饭</a>
                <a class="btn btn-warning" onclick="window.location.href='/goods?loc=2'">三饭</a>
                <a class="btn btn-primary" onclick="window.location.href='/goods?loc=4'">东区</a>
                <a class="btn btn-outline-secondary" onclick="window.location.href='/goods'">
					全部
				</a>
         <div class="w3l_search float-right">
    			<form action="/goods/" method="get">
    				<input type="search" name="Search" style="Float:left;height:35px;font-size: 16px" placeholder="搜索商品/ID" required="">
    				<button type="submit" class="btn btn-primary" style="Float:left;height:35px" aria-label="Left Align">
    					<i class="fa fa-search" aria-hidden="true"> </i>
    				</button>
    				<div class="clearfix"></div>
    			</form>
                
		      </div>
        {% endif %}
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>名称</th>
                                        <th>类别</th>
                                        <th>进货价</th>
                                        <th>售价</th>
                                        <th>生产日期</th>
                                        <th>过期时间</th>
                                        <th>剩余保质期</th>
                                        <th>降价</th>
                                        <th>有货超市</th>
                                        <th>总库存</th>
                                        <th>供应商</th>
                                    </tr>
                                    </thead>
                                    <tbody style="height: 300px;overflow-y: auto">
                                    {% for g in page_list %}
                                    <tr>
                                        <td>
                                            <span>{{ g.id }}</span>
                                            <button class="btn btn-outline-success" style="display: none" onclick="window.location.href=href='{% url 'good_edit' %}?id={{ g.id }}'">修改</button>
                                        </td>
                                        <td>{{ g.name }}</td>
                                        <td>{{ g.sort|get_simple_sort }}</td>
                                        <td class="text-nowrap">{{ g.cost_price }}</td>
                                        <td>{{ g.sale_price }}</td>
                                        <td id="produce_date">{{ g.produce_date|date:'Y-m-d' }}</td>
                                        <td id="limit_date">{{ g.limit_date|date:'Y-m-d' }}</td>
                                        <td id="preserve">{% get_limit_period g.produce_date g.limit_date %}
                                        </td>
                                        <td>
                                            <!-- 鼠标悬停出现修改按钮，点击出现输入框 -->
                                            <div class="hover_span">
                                                <span>{{ g.lower }}</span>
                                                <button type="button" class="btn btn-outline-warning hover_mod" style="display: none;">降价</button>
                                            </div>
                                            <div class="input-group mb-3 lower_input" style="display: none">
                                                <div class="input-group-append" style="background-color: rgba(0,0,0,0)">
                                                    <span class="input-group-text lower_cancel" id="{{ g.id }}"><i class="fa fa-undo"></i></span>
                                                </div>
                                                <input class="form-control" id="{{ g.id }}" style="width: 30px" type="text" value="{{ g.lower }}" onkeyup="CheckInputIntFloat(this)">
                                                <div class="input-group-append lower_check" style="background-color: rgba(0,0,0,0)">
                                                    <span class="input-group-text" id="{{ g.id }}"><i class="fa fa-check"></i></span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{% record_get_location g.record_set.all %} </td>
                                        <td>
                                            <div class="hover_span">
                                                <span>{{ g.record_set.all|record_get_storage }}</span>
                                                <button type="button" style="display: none;" class="btn btn-outline-primary" id="purchase" name="{{ g.id }}" onclick="window.location.href='{% url 'purchase' %}?id={{ g.id }}'">
                                                    进货
                                                </button>
                                            </div>
                                        </td>
                                        <td>{{ g.provider.name }}</td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>

            <!-- 页码选择菜单 -->
				<nav class="numbering">
                        <ul class="pagination paging">
                        {#如果有上一页#}
                        {% if page_list.has_previous %}
                            <li class="previous"><a href="{% if flag == 1 %}?{{ key }}={{ value }}&{% else %}?{% endif %}page={{ page_list.previous_page_number }}"  class="btn btn-outline-primary btn-rounded">«</a></li>
                        {% endif %}

                        {#输出页码#}
                        {% for num in paginator.page_range %}
                            {% if num == current_page %}
                                <li class="item active"><a class="btn btn-primary btn-rounded" href="{% if flag == 1 %}?{{ key }}={{ value }}&{% else %}?{% endif %}page={{ num }}">{{ num }}</a></li>
                            {% else %}
                                <li class="item"><a  class="btn btn-outline-primary btn-rounded" href="{% if flag == 1 %}?{{ key }}={{ value }}&{% else %}?{% endif %}page={{ num }}">{{ num }}</a></li>
                            {% endif %}
                        {% endfor %}

                        {#如果有下一页#}
                        {% if page_list.has_next %}
                            <li class="next"><a class="btn btn-outline-primary btn-rounded" href="{% if flag == 1 %}?{{ key }}={{ value }}&{% else %}?{% endif %}page={{ page_list.next_page_number }}">»</a></li>
                        {% endif %}
                    </ul>
				</nav>
            <!-- //页码选择菜单 -->
                            </div>
                        </div>
                    </div>
                </div>
    </div>

{% endblock %}
{% block js %}
    <script>
    // 控制输入框只能输入整数或者浮点数
    function CheckInputIntFloat(oInput) {
        if('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/,'')) {
            oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == null ? '' :oInput.value.match(/\d{1,}\.{0,1}\d{0,}/);
            }
    }
    // 输入框回车事件
    $('.lower_input').keydown(function(e) {
            {#$(this).siblings().css('display', '');#}
           if (e.keyCode == 13) {
                {#console.log($(this).siblings());#}
                console.log($(this).find('.lower_check'));
                $(this).find('.lower_check').click();
           }
           if (e.keyCode == 27) {
                {#console.log($(this).siblings());#}
                console.log($(this).find('.lower_check'));
                $(this).find('.lower_cancel').click();
           }
      });
    // 回车ajax
    $('.lower_check').click(function () {
        var data = {
            id: $(this).siblings('input').attr('id'),
            lower: $(this).siblings('input').val(),
        };
        console.log(data);
        $.post('/good_lower/', data, function (text, status) {
            alert(text);
            if(text==="ok"){
                console.log("okok");
                $('.lower_cancel').click();
                window.location.reload();
                {#$(".card-body").load(location.href + " .card-body");#}
                {#$(".hover_span").load(location.href + " .hover_span");#}

            }
            else{
                console.log("nono");
            }
        });
    });

    $('.hover_span').hover(
        function () {
            $(this).find('span').hide();
            $(this).find('button').show();
        },
        function () {
            $(this).find('button').hide();
            $(this).find('span').show();
        }
    );
    $('.hover_mod').click(function () {
        console.log('修改按钮-------'+$(this).parent().siblings().find('.lower_input'));
        $(this).parent().hide();
        $(this).parent().siblings().show();
        $(this).parent().siblings().find('input').focus();
    });
    $('.lower_cancel').click(function () {
        $(this).parent().parent().hide();
        $(this).parent().parent().siblings().show();
    });

    $('tbody tr').hover(
        function () {
            {#console.log($(this).children(":first").children(":first").text());#}
            $(this).children(":first").children(":first").hide().siblings().show();
        },
        function () {
            $(this).children(":first").children(":first").show().siblings().hide();
        }
    );


    </script>
{% endblock %}